HTMLify
index.html
Views: 376 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="loancalculator.css"> <title>Loan Calculator</title> </head> <body> <div id="loancal"> <h1>Loan Calculator</h1> <p>Loan Amount: $<input id="amount" type="number" min="1" max="5000000" onchange="computeLoan()"></p> <p>Interest Rate: %<input id="interest_rate" min="0" max="100" value="10" step=".1" onchange="computeLoan()"> </p> <p>Months to Pay: <input id="months" type="number" min="1" max="300" value="1" step="1" onchange="computeLoan()"></p> <h2 id="payment"></h2> </div> <script> function computeLoan() { const amount = document.querySelector('#amount').value; const interest_rate = document.querySelector('#interest_rate').value; const months = document.querySelector('#months').value; const interest = (amount * (interest_rate * 0.01)) / months; let payment = ((amount / months) + interest).toFixed(2); payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); document.querySelector('#payment').innerHTML = `Monthly Payment = ${payment}` } </script> </body> </html> |